<template>
	<view class="evan-form-show">
		<test-com beginYear="2000" endYear="2030" @confirm="onConfirm"></test-com>
		<evan-form :hideRequiredAsterisk="hideRequiredAsterisk" ref="form" :model="cursePlan">
			<evan-form-item label="本节课名称：" prop="curseTitle">
				<input class="form-input" placeholder-class="form-input-placeholder" v-model="cursePlan.curseTitle" />
			</evan-form-item>
			<evan-form-item label="本节课时长(分钟)：" prop="cursePeriod">
				<input class="form-input" placeholder-class="form-input-placeholder" v-model="cursePlan.cursePeriod" type="number"
				 placeholder="单位:分钟" />
			</evan-form-item>
			<evan-form-item label="本节课内容：" prop="cursePlanContent">
				<input class="form-input" placeholder-class="form-input-placeholder" v-model="cursePlan.cursePlanContent" />
			</evan-form-item>
			<evan-form-item label="本节课消耗多少卡路里：" prop="curseKaluli">
				<input class="form-input" placeholder-class="form-input-placeholder" v-model="cursePlan.curseKaluli" type="number" />
			</evan-form-item>
		</evan-form>
		<button @click="save" class="evan-form-show__button">保存</button>
	</view>
</template>

<script>
	import EvanForm from '@/components/evan-form/evan-form.vue'
	import EvanFormItem from '@/components/evan-form/evan-form-item.vue'
	import testCom from '@/components/test_com.vue'
	import base from '@/common/base.js'
	export default {
		components: {
			EvanForm,
			EvanFormItem,
			testCom
		},
		data() {
			return {
				hideRequiredAsterisk: false,
				cursePlan: [],
				rules: {
					cursePlanContent: {
						required: true,
						message: '请输入课程内容'
					},
					cursePeriod: {
						required: true,
						message: '课程时长不能为空'
					},
					curseTitle: {
						required: true,
						message: '课程名称不能为空'
					},
					curseKaluli: {
						required: true,
						message: '请输入本节课消耗多少卡路里'
					}
				}
			}
		},
		onLoad(options) {
			this.getCursePlanById(options.cursePlanId);
			// 这里必须放在$nextTick中，不然h5会找不到this.$refs.form
			this.$nextTick(() => {
				this.$refs.form.setRules(this.rules)
			})
		},
		methods: {
			save() {
				this.$refs.form.validate((res) => {
					if (res) {
						let timeStr=base.starttime.replace(/-/g,"/");
						this.cursePlan.curseStartTime = new Date(timeStr);
						uni.request({
							url: base.urlPrefix + "yoga_app/curse-plan/coachUpdateCursePlan",
							method: 'POST',
							header: {
								'content-type': 'application/json'
							},
							data: {
								cursePlanJSON: this.cursePlan
							},
							success: (res) => {
								uni.showToast({
									title: '更新成功'
								});
								uni.navigateTo({
									url: '/pages/user/course/editNotPassCourseDetail?curseId='+this.cursePlan.curseId
								});
							}
						})
					}
				})
			},
			hideReqired() {
				this.hideRequiredAsterisk = !this.hideRequiredAsterisk
			},
			getCursePlanById(cursePlanId) {
				uni.request({
					url: base.urlPrefix + "yoga_app/curse-plan/coachGetCursePlanByCursePlanId",
					data: {
						cursePlanId: Number(cursePlanId)
					},
					success: (res) => {
						this.cursePlan = res.data.object;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.evan-form-show {
		padding: 0 30rpx;

		.form-input {
			font-size: 28rpx;
			color: #333;
			text-align: right;
		}

		.form-input-placeholder {
			font-size: 28rpx;
			color: #999
		}

		&__button {
			width: 100%;
			height: 88rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			font-size: 36rpx;
			color: #fff;
			margin-top: 20rpx;
			background-color: #2D87D5;

			&::before,
			&::after {
				border: none;
			}
		}

		.customize-form-item {
			&__label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			&__radio {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				&__text {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
</style>
